<template>
  <h2>{{name}} 年龄:{{age}}</h2>
  <slot></slot>
  <slot name="qwe"></slot>
  <button @click="getName"> 触发事件</button>
</template>

<script>
// import { defineProps,defineEmits } from "vue";
// const  emits = defineEmits(['getName']),
// const  props = defineProps(['hello']),

export default {
  name:"Demo",
  props:['msg'],
  emits : ['hello'],
  

  setup(props,context) {
    // console.log(props,context);
    /*
      setup 函数接收两个参数（ props、context ）
        props
        context[attrs emit slots]
          attrs 相当于vue2中的 $attrs，没有声明接受的参数会被暂存到此
          emit 自定义事件，使用前接收
          slots 插槽
    */
    console.log('props',props);
    console.log('context.attrs',context.attrs);
    console.log('context.emit',context.emit);
    console.log('context.slots',context.slots);
    
    let name = '李四'
    let age = 18

    function getName() {
      context.emit('hello',name)
    }

    return {
      name,age,getName
    }
  }
}
</script>

<style>

</style>